<template>
    <v-app>
        <div class="nav-top">
            <div class="content">
                <div class="left-logo">
                    <img src="./assets/logo.png" alt="Wetcland Logo">
                </div>
                <div class="right-nav-item">
                    <ul>
                        <li>
                            <v-btn class="ma-2" color="success" @click="$router.replace('introduction')">简介</v-btn>
                        </li>
                        <li>
                            <v-btn class="ma-2" color="success" @click="$router.replace('res_download')">下载游戏</v-btn>
                        </li>
                        <li>
                            <v-btn class="ma-2" color="success" @click="goMcrmb">节操币充值</v-btn>
                        </li>
                        <li>
                            <v-btn class="ma-2" color="success" @click="$router.replace('wetcland')">Wetcland</v-btn>
                        </li>
                        <li>
                            <v-btn class="ma-2" color="success">举报投诉</v-btn>
                        </li>
                        <li>
                            <v-btn color="warning" fab small dark @click="openPlayerPanel">
                                <v-icon>mdi-account-circle</v-icon>
                            </v-btn>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="space-box"></div>
        <keep-alive>
            <router-view/>
        </keep-alive>
        <FooterView/>
        <LRPanel ref="LRP"/>
        <div class="music-box">
            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1351188267&auto=1&height=66"></iframe>
        </div>
    </v-app>
</template>

<script>
    import FooterView from "./views/FooterView";
    import LRPanel from "./components/LRPanel";
    import common from './common'
    export default {
        name: 'App',
        components: {
            FooterView,
            LRPanel
        },
        mounted() {
            this.$router.replace('introduction')
        },
        data: () => ({
            playerId: '',
            playerName: ''
        }),
        methods: {
            goMcrmb() {
                window.open('http://www.mcrmb.com/cz/21858')
            },
            openPlayerPanel() {
                if (common.getCookie('playerId')) {
                    this.$router.replace('player_manager')
                } else {
                    this.$refs.LRP.dialog = true
                }
            }
        }
    };
</script>
<style lang="scss">
    .nav-top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
    }

    .space-box {
        width: 100%;
        height: 50px;
    }

    .music-box {
        position: fixed;
        right: 0;
        bottom: 0;
    }

    .nav-top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 50px;
        background: skyblue;

        .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 80%;
            height: 100%;

            .left-logo {
                display: flex;
                align-items: center;
                flex: 1;
                height: 100%;

                img {
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                }
            }

            .right-nav-item {
                flex: 5;
                height: 100%;
                display: flex;
                justify-content: flex-end;

                ul {
                    width: 80%;
                    height: 100%;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    li {
                        a {
                            font-size: 18px;
                            color: white;

                            &:hover {
                                color: #5088C9;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
